import * as React from 'react'
import { Tag, Tooltip } from 'antd'

import './index.less'

interface Props {
  tags: any[],
  closable: boolean,
  handleClose?: (arg?: any) => void
}

export default class Tags extends React.Component<Props, any> {
  handleClose = tag => {
    this.props.handleClose(tag)
  }

  // 获取中文语言类型
  getChineseType = value => {
    let tag = ''
    switch(value) {
      case 'chinese':
        tag = '中'
        break
      case 'english':
        tag = '英'
        break
      case 'japanese':
        tag = '日'
        break
      case 'french':
        tag = '法'
        break
      case 'german':
        tag = '德'
        break
    }
    return tag
  }
  render() {
    const { tags, closable} = this.props
    return (
      <div className="components-tags">
        {tags.map((item, index) => {
          const isLongTag = item.content.length > 48;
          const tagElem = (
            <Tag key={item.id} closable={closable} afterClose={() => this.handleClose(item)}>
              {isLongTag ? <span><span className="tag-name">[{this.getChineseType(item.tag)}]</span><span className="tag-content">{`${item.content.slice(0, 48)}...`}</span></span> :
              <span className="tag-wrap"><span className="tag-name">[{this.getChineseType(item.tag)}]</span><span className="tag-content">{item.content}</span></span>}
            </Tag>
          );
          return isLongTag ? <Tooltip title={item.content} key={index}>{tagElem}</Tooltip> : tagElem;
        })}
      </div>
    )
  }
}
